<!--
 @description 办事处-配车当月趋势
 @fileName CarContent.vue
 @author zengqiongying
 @created 2021/06/28 17:17:07
-->
<template>
  <div class="wrapper">
    <div class="main-title">
      <div style="flex:1">{{ curMonthTitle }}</div>
      <div class="chart_tab">
        <div
          v-for="(item,index) in curMonthTabs"
          :key="index"
          class="tab"
          :class="{'active':tabIndex===index}"
          @click="tabIndex=index"
        >{{ item.name }}</div>
      </div>
    </div>
    <thirty-day-care-chart v-if="tabIndex===0" />
    <thirty-day-wait-care-chart v-else />
  </div>
</template>

<script>
import ThirtyDayCareChart from './ThirtyDayCareChart'
import ThirtyDayWaitCareChart from './ThirtyDayWaitCareChart'
import { parseTime } from '@/utils'
export default {
  name: 'OrdersPageContent',
  components: { ThirtyDayCareChart, ThirtyDayWaitCareChart },
  props: {
    coreDate: {
      type: String,
      default: parseTime(new Date(), '{y}-{m}-{d}')
    }
  },
  data() {
    return {
      provinceName: this.$route.query.provinceName || '',
      officeName: this.$route.query.officeName || '',
      yearTotal: 0, // 本年总配车量
      curMonthTabs: [
        { name: '配车', title: '当月物流配车趋势(车)' },
        { name: '待配车', title: '近30天待配车趋势(车)' }
      ],
      tabIndex: 0
    }
  },
  computed: {
    curMonthTitle() {
      return this.curMonthTabs[this.tabIndex].title
    }
  },
  created() {
    this.getTotalCount()
  },
  methods: {
    // 获取年度总量
    getTotalCount() {
      // TODO:
      this.yearTotal = 111
    }
  }
}

</script>
<style lang='less' scoped>
  .chart_tab{
    display: flex;
    align-items: center;
    font-family: PingFang-Regular;
    font-size:12px;
    letter-spacing: 0;
    color: #888888;
    .tab{
      display: inline-block;
      padding: 0 10px;
      height: 22px;
      border: 1px solid #DDDDDD;
      margin-left: -1px;
      &:first-child{
        border-radius: 2px 0 0 2px;
      }
      &:last-child{
        border-radius: 0 2px 2px 0;
        border-right: 1px solid #DDDDDD;
      }
      &.active{
        border-color: #12B9A3;
        color:#12B9A3;
        position: relative;
        z-index: 1;
      }
    }
  }
</style>
